<template>
  <div>
    <el-upload
      ref="upload"
      action=""
      :limit="1"
      :auto-upload="false"
      :on-change="handleChange"
      accept=".xlsx, .xls"
      :file-list="fileList"
      :on-exceed="onExceed"
      :on-remove="onRemove"
    >
      <el-button size="small" type="primary">{{ $t("common.clickUpload") }}</el-button>
      <div slot="tip" class="el-upload__tip">{{ $t("common.uploadFileRule") }}</div>
    </el-upload>
  </div>
</template>

<script>
// 手动上传，选择资源之后，不马上上传，表单提交时一起上传
// import formMixin from '../ele-form/mixins/formMixin'
export default {
  name: "upload-no-auto",
  // mixins: [formMixin], // 必须引入mixin
  data() {
    return {
      fileList: []
    }
  },
  methods: {
    handleChange(file) {
      if (file.size / 1024 > 5 * 1024) {
        this.$message.error(this.$t("common.uploadTips5mb"))
        this.$refs.upload.clearFiles()
      } else {
        const formData = new FormData()
        formData.append("file", file.raw)
        this.$emit("onchange", formData)
      }
    },
    onRemove(file, fileList) {
      this.$emit("onchange", null)
    },
    onExceed() {
      this.$message.error(this.$t("common.uploadLimit1"))
    },
    clearFiles() {
      this.$refs.upload.clearFiles()
    }
  }
}
</script>

<style scoped></style>
